<template>
  <v-chart :key="key" :style="`width: ${chartWidth}; height: ${chartHeight};`" :option="chartOptions"></v-chart>
</template>
<script lang="ts" setup>
import vChart from 'vue-echarts'
import { ref, computed, watch } from 'vue'
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, BarChart, CanvasRenderer]);

let key = ref(0)
const props = defineProps({
  list: {
    type: Array,
    required: true,
    default: () => []
  },
  title: {
    type: String,
    required: true,
    default: ""
  },
  width: {
    type: String,
    required: true,
    default: "100%"
  },
  height: {
    type: String,
    required: true,
    default: "100%"
  },
  color: {
    type: String,
    required: true,
    default: ""
  }
})
const chartWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  } else {
    return props.width
  }
})
const chartHeight = computed(() => {
  if (typeof props.height === 'number') {
    return props.height + 'px'
  } else {
    return props.height
  }
})

let chartOptions = ref({
  title: {
    text: ""
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      rotate: 25,
      formatter: function (value: any) {
          // 对文字进行截断处理，超过一定长度时显示省略号
          if (value.length > 10) {
              return value.substring(0, 10) + '...';
          } else {
              return value;
          }
      }
    },
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      barWidth: 40, // 设置每根柱子的宽度为40
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        color: function(params: { dataIndex: string | number; }) {
          if (props.color) {
            var colorList = ['#4e82c2', '#62b196', '#11CCC1', '#e6af62'];
            return colorList[params.dataIndex];
          }
        }
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params: any) {
      return params[0].name;
    }
  }
})


watch(() => props.list, (newVal, oldVal) => {
  nextTick(() => { 
    updateTitle(props.title)
    updateList(newVal)
  })
}, {
  deep: true,
  immediate: true
});
watch(() => props.title, (newVal, oldVal) => {
  nextTick(() => {
    updateTitle(newVal)
  })
}, {
  deep: true,
  immediate: true
});


const updateTitle = (value: string) => {
  chartOptions.value.title.text = value
  key.value++
}

const updateList = (data: any[]) => {
  const xValues: any[] = []
  const yValues: any[] = []
  if (!isEmpty(data)) {
    data.forEach((i: { value: any; name: any; }) => {
      if (!isEmpty(i)) {
        yValues.push(i.value)
        xValues.push(i.name)
      }
    })

    chartOptions.value.xAxis.data = [...xValues]
    chartOptions.value.series[0].data = [...yValues]
    key.value++
  }
}
</script>
